<template>
    <div class="order-report">
        <div class="report-table-top-title">新增商家数</div>

        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <el-radio-group v-model="radio" size="small">
                    <el-radio-button label="当天"></el-radio-button>
                    <el-radio-button label="7天"></el-radio-button>
                    <el-radio-button label="一个月"></el-radio-button>
                    <el-radio-button label="自定义"></el-radio-button>
                </el-radio-group>
                <div class="report-table-form1-item word samll" style="width: 35px"></div>
                <div class="report-table-form1-item" style="width: 200px" v-show="type === 4">
                    <el-date-picker
                        size="small"
                        v-model="timeStart"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 20px"
                    v-show="type === 4"
                > 至</div>
                <div class="report-table-form1-item" style="width: 200px" v-show="type === 4">
                    <el-date-picker
                        size="small"
                        v-model="timeEnd"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
                <!-- <div class="report-table-form1-item word samll" style="width: 80px">{{businessTime}}</div> -->
                <el-button type="primary" size="small" style="margin-left:10px" @click="search">查询</el-button>
            </div>
        </div>
        <div class="order-report-padding-16"></div>
        <div class="eChart-wrapper">
            <div class="eChart-pic" v-show="dataList.length === 0">
                <div class="eChart-pic-no-data"></div>
            </div>
            <div class="eChart-pic" id="myChart1" ></div>
       
        </div>
             <div class="eChart-table" v-if="echartType===1">
                <div class="eChart-table-in">
                    <div class="eChart-table-in-top" style="margin-left:12px;font-size:18px;font-weight:bold;margin-bottom:5px">
                        新增商家明细({{total}}):
                    </div>
                    <el-table
                        :header-cell-style="headerCellStyle"
                        size="small"
                        :data="dataList"
                        border
                        style="width: 100%;height:400px;overflow:auto"
                    >
                         <el-table-column prop="companyName" label="序号" width="60">
                             <template slot-scope="scope">{{scope.$index+1}}</template>
                         </el-table-column>
                        <el-table-column prop="companyName" label="商家名"></el-table-column>
                        <el-table-column prop="companyCode" label="商家code"></el-table-column>
                        <el-table-column prop="address" label="地址"></el-table-column>
                        <el-table-column prop="contact" label="联系人"></el-table-column>
                        <el-table-column prop="telPhone" label="电话"></el-table-column>
                        <el-table-column prop="expiredTime" label="授权到期时间"></el-table-column>
                         <el-table-column prop="createtime" label="创建时间"></el-table-column>
                        <!-- <el-table-column prop="roomNum" label="包厢数量"></el-table-column> -->
                        <el-table-column prop="agentName" label="代理商名称"></el-table-column>
                        <!-- <el-table-column prop="managementTypeName" label="经营类型"></el-table-column> -->
                        <!-- <el-table-column prop="versionCode" label="版本号"></el-table-column> -->
                        <el-table-column prop="status" label="状态">
                            <template slot-scope="props">
                                <div v-show="props.row.status===0">正常</div>
                                <div v-show="props.row.status===1">停用</div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="currentVersionName" label="当前版本名称"></el-table-column> -->
                    </el-table>
                    <!-- <div class="eChart-table-in-down">
                        <div
                            v-for="item in dataList"
                            :key="item.name + item.value"
                        >{{item.name}}: {{item.value}}元</div>
                    </div>-->
                </div>
            </div>

        <div class="page-padding"></div>
    </div>
</template>

<script type="text/ecmascript-6">
import echarts from 'echarts'
export default {
    data: function () {
        return {
            // businessTime: '', // 营业时间

            timeStart: '',
            timeEnd: '',

            data: [],
            dataList: [],
            total: '',
            time1: [],
            data1: [],
            echart2: false,
            echart1: true,
            radio: '当天', // 昨日 今日
            type: 1,
            echartType: 1
        }
    },
    mounted () { },
    created () {
            var time1 = (new Date()).getTime()
            let today = new Date(time1) // 获取的是当天日期
            today = today.getFullYear() + '-' + (today.getMonth() > 9 ? (today.getMonth() + 1) : '0' + (today.getMonth() + 1)) + '-' + (today.getDate() > 9 ? (today.getDate()) : '0' + (today.getDate()))
            this.startTime = today
            this.endTime = today
            this.getPage()
            this.getInfo2()
    },
    watch: {
        radio () {
            var time3 = (new Date()).getTime() - 29 * 24 * 60 * 60 * 1000 // 获取一个月
            var time2 = (new Date()).getTime() - 6 * 24 * 60 * 60 * 1000 // 获取7天
            var time1 = (new Date()).getTime()
            let aMonth = new Date(time3) // 获取的是前一天日期
            let sevenDay = new Date(time2) // 获取的是前一天日期
            let today = new Date(time1) // 获取的是当天日期
            aMonth = aMonth.getFullYear() + '-' + (aMonth.getMonth() > 9 ? (aMonth.getMonth() + 1) : '0' + (aMonth.getMonth() + 1)) + '-' + (aMonth.getDate() > 9 ? (aMonth.getDate()) : '0' + (aMonth.getDate()))
            sevenDay = sevenDay.getFullYear() + '-' + (sevenDay.getMonth() > 9 ? (sevenDay.getMonth() + 1) : '0' + (sevenDay.getMonth() + 1)) + '-' + (sevenDay.getDate() > 9 ? (sevenDay.getDate()) : '0' + (sevenDay.getDate()))
            today = today.getFullYear() + '-' + (today.getMonth() > 9 ? (today.getMonth() + 1) : '0' + (today.getMonth() + 1)) + '-' + (today.getDate() > 9 ? (today.getDate()) : '0' + (today.getDate()))
            if (this.radio === '自定义') {
                this.type = 4
                this.timeStart = ''
                this.timeEnd = ''
            }
            if (this.radio === '一个月') {
                this.type = 3
                this.startTime = aMonth
                this.endTime = today
                this.getInfo2()
                this.getPage()
            }
            if (this.radio === '7天') {
                this.type = 2
                this.startTime = sevenDay
                this.endTime = today
                this.getInfo2()
                this.getPage()
            }
            if (this.radio === '当天') {
                this.type = 1
                this.startTime = today
                this.endTime = today
                this.getInfo2()
                this.getPage()
            }
        }
    },
    components: {},
    computed: {},
    methods: {
        setPie1 () {
            this.$nextTick(() => {
                let myChart = echarts.init(
                    document.getElementById('myChart1'),
                    'light'
                )
                //			echarts.init(this.$refs.chartOne)
                myChart.setOption({
                    title: {
                        text: '新增商家数'
                    },
                     tooltip: {
                        trigger: 'item'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.time1
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: this.data1,
                        type: 'line',
                        smooth: true
                    }]
                })
            })
        },
        search () {
            if (this.type === 4) {
                if (!this.timeEnd) {
                    this.$message({
                    message: '请选择时间',
                    type: 'warning'
                })
                return
                }
                if (!this.timeStart) {
                    this.$message({
                    message: '请选择时间',
                    type: 'warning'
                })
                return
                }
                if (this.timeStart > this.timeEnd) {
                    this.$message({
                        message: '开始时间不能大于结束时间',
                        type: 'warning'
                    })
                    return
                }
                if (this.timeStart && this.timeEnd) {
                    this.startTime = this.timeStart
                     this.endTime = this.timeEnd
                    this.getPage()
                    this.getInfo2()
                }
            } else {
            this.getPage()
            this.getInfo2()
            }
        },
        // 新增商家明细
        getPage () {
            this.$http
                .post(
                    this.$store.state.IP + '/Companylively/getCompanyNewAddNumDetail',
                    {
                        data: {
                            begindate: this.startTime, // 页数
                            enddate: this.endTime // 一页显示数量
                        }
                    },
                    {
                        emulateJSON: false
                    }
                )
                .then(
                    response => {
                        console.log(
                            '-------------------------------------------'
                        )
                        response = response.body
                        console.log(response)
                        if (response.ret === '0') {
                            console.log('调用出品详情成功')
                            console.log(response.data)
                            response.data.list.forEach(item => {
                                item.createtime = this.timestampToTime(item.createtime)
                                item.expiredTime = this.timestampToTime(item.expiredTime)
                            })
                            this.dataList = response.data.list
                            this.total = response.data.total
                        }
                        if (response.ret !== '0') {
                            console.log('调用出品详情失败')
                        }
                        console.log(
                            '******************************************'
                        )
                    },
                    response => {
                        console.log('通讯失败')
                    }
                )
        },
        // 新增商家数
        getInfo2 () {
            this.$http.post(this.$store.state.IP + '/Companylively/getCompanyNewAddNum', {
                data: {
                    begindate: this.startTime, // 页数
                    enddate: this.endTime // 一页显示数量
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    // console.log('调用apk列表成功')
                    console.log(response.data)
                    let dataList = response.data.list
                    this.data1 = []
                    this.time1 = []
                    for (var i in dataList) {
                        this.data1.push(dataList[i])
                        this.time1.push(i)
                    }
                  this.setPie1()
                }
                if (response.ret !== '0') {
                    // console.log('调用apk列表失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.eChart-wrapper
    width: 100%
    min-height: 550px
    padding: 5px 0 0 22px
    box-sizing: border-box
    font-size: 0
    position: relative
    background: #fff
    margin-top: 0px

    .eChart-pic
        position: absolute
        left: 10px
        top: 10px
        right: 500px
        bottom: 22px
        width: 950px
        display: inline-block
        vertical-align: top

        /* background #13ce66 */
        .eChart-pic-no-data
            position: absolute
            width: 600px
            height: 198px
            top: 50%
            left: 50%
            transform: translate(-50%, -50%)
            // background: url('../../../common/pic/noData.png')
            background-size: cover

    .eChart-table
        position: absolute
        right: 50px
        height: 500px
        top: 22px
        bottom: 0
        width: 45%
        margin-left: 45px
        .eChart-table-in
            width: 100%
            min-height: 30%
            height: 500px
            // margin-left: 25px
            line-height: 30px
            font-size: 16px
            background: #f8f8fa

            // padding: 15px 0 15px 15px
            // border: 1px solid rgba(0, 0, 0, 0.2)
            .eChart-table-in-top
                height: 54px
                line-height: 54px
                width: 100%
                font-size: 18px
                margin-left: 10px
                border-bottom: 1px solid #e9ebf1
                // padding-left: 22px

                .eChart-table-in-top-icon
                    width: 22px
                    height: 22px
                    display: inline-block
                    vertical-align: middle
                    background-size: cover
                    // background-image: url('../../../common/pic/icons/icons_2_finance/icon_1.png')

            .eChart-table-in-down
                padding: 15px 0 15px 44px
                font-size: 16px

.order-report
    width: 100%
    background: #fff
    height: 500px
    

    .order-report-padding-16
        width: 100%
        height: 22px
        background: #f1f0f5

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background: #f1f0f5
        position: relative

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        box-sizing: border-box
        background: #fff
</style>
